<!--  组件：导航Tab名称配置（数据范围配置）-->
<!-- created by chengfei 2023/4/18 -->
<template>
    <rx-dialog :oktext="$ti18('rxForm.okBtn', '确认')" :canceltext="$ti18('rxForm.closeBtn','关闭')" order="bottom" @handOk="handOk" @cancel="close">
        <div>
            <a-form-model ref="form" :rules="{ type: [{ required: true, message: this.i18n('type','请选择值来源','select') }]}">
                <a-form-model-item :label="i18n('type','值来源')" porp="type">
                    <a-radio-group v-model="localConfig.type" default-value="custom" @change="handType" :options="options" />
                </a-form-model-item>
            </a-form-model>
            <TabTreeSettingCustom v-if="localConfig.type === 'custom'" :default-value="localConfig" ref="custom" />
            <TabTreeSettingDic v-if="localConfig.type === 'dic'" ref="dic" :default-value="localConfig" />
            <TabTreeSettingSql v-if="localConfig.type === 'sql'" ref="sql" :default-value="localConfig" />
            <!-- <component ref="curComponent" v-bind="bindSetting" :is="currentView" /> -->
        </div>
    </rx-dialog>
</template>

<script>
import TabTreeSettingCustom from './TabTreeSettingCustom'
import TabTreeSettingDic from './TabTreeSettingDic'
import TabTreeSettingSql from './TabTreeSettingSql'
import { Util } from "@lowcode/jpaas-common-lib"

export default {
    name: 'Edit2TabTreeConfSetting',
    components: {
        TabTreeSettingCustom,
        TabTreeSettingDic,
        TabTreeSettingSql,
    },
    props: {
        destroy: { type: Function },
        layerid: { type: String },
        //配置信息
        config: {
            type: [Object, String],
            default: () => {
                return undefined
            },
        },
        //列表字段
        fields: {
            type: Array,
        },
    },
    data() {
        return {
            //配置信息
            localConfig: {
                type: 'custom',
                setting: {},
            },
            localFields: [],
            options: [
                { value: 'custom', label: this.i18n('options.custom','自定义') },
                { value: 'dic', label: this.i18n('options.dic','数据字典') },
                { value: 'sql', label: this.i18n('options.sql','自定义SQL') },
            ],
            //绑定设置
            bindSetting: {
                config: {},
                fields: [],
            },
        }
    },
    watch: {
        config: {
            handler(val, old) {
                this.init()
            },
            deep: true,
        },
    },
    created() {
        if (this.config) {
            this.localConfig = this.parse(this.config)
        }
        if (this.fields) {
            this.localFields = this.fields
        }
        this.init()
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"formCodegenBusiness.edit2.TabTreeConfSetting",key);
        },
        init() {
            //设置绑定数据
            this.bindSetting.config = this.localConfig.setting
            this.bindSetting.fields = []
            this.bindSetting.fields.push(...this.localFields)
        },
        parse(setting) {
            if (typeof setting == 'string') {
                return JSON.parse(setting)
            }
            return setting
        },
        handType(e) {
            this.bindSetting.config = ''
        },
        setData(config, fields) {
            if (config.type) {
                this.localConfig = config
            }

            this.localFields = fields
            this.init()
        },
        validate(callback) {
            if (callback) {
                callback()
            }
        },
        /**
         * {
         *    type:"",
         *    setting:{}
         * }
         */
        getData() {
            const rtn = this.localConfig
            const curComponent = this.$refs[this.localConfig.type]
            rtn.setting = { ...curComponent.getData() }
            return rtn
        },
        close() {
            Util.closeWindow(this, 'cancel')
        },
        handOk(vm) {
            Util.closeWindow(this, 'ok')
        },
    },
}
</script>

<style scoped></style>
